<template>
<div class="member-container">
  <!-- 会员信息概览 -->
  <el-card class="member-card">
    <div class="member-header">
      <div class="user-info">
        <h2>{{ userInfo.nickname }} <el-tag type="warning">{{ currentLevel.name }}</el-tag></h2>
        <p>当前积分：<span class="points">{{ userInfo.points }}</span> 分</p>
      </div>
      <div class="level-progress">
        <el-progress
          :percentage="progressPercentage"
          :format="progressFormat"
          status="success"
          striped
        />
        <p>再消费 {{ nextLevel.requiredPoints - userInfo.points }} 积分升级至 {{ nextLevel.name }}</p>
        <!-- 积分操作区 -->
        <div class="points-actions">
          <el-button type="primary" @click="showPointsDialog('exchange')">积分兑换</el-button>
          <el-button type="success" @click="showPointsDialog('convert')">积分抵现</el-button>
        </div>
      </div>
    </div>
  </el-card>

  <!-- 会员等级体系 -->
  <el-card class="level-card">
    <h3>会员等级体系</h3>
    <div class="level-list">
      <div
        v-for="level in memberLevels"
        :key="level.level"
        class="level-item"
        :class="{ 'current-level': level.level === currentLevel.level }"
      >
        <el-icon :size="40"><Medal /></el-icon>
        <h4>{{ level.name }}</h4>
        <p>所需积分：{{ level.requiredPoints }}</p>
        <ul class="benefits-list">
          <li v-for="(benefit, index) in level.benefits" :key="index">{{ benefit }}</li>
        </ul>
      </div>
    </div>
  </el-card>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { Medal } from '@element-plus/icons-vue'

interface MemberLevel {
  level: number
  name: string
  requiredPoints: number
  benefits: string[]
}

interface UserInfo {
  nickname: string
  points: number
  level: number
}

export default defineComponent({
  components: { Medal },
  setup() {
    const memberLevels: MemberLevel[] = [
      {
        level: 1,
        name: '普通会员',
        requiredPoints: 0,
        benefits: [
          '消费积分1倍累计',
          '基础售后服务',
          '每月专属优惠券'
        ]
      },
      {
        level: 2,
        name: '银卡会员',
        requiredPoints: 1000,
        benefits: [
          '消费积分1.2倍累计',
          '优先客服通道',
          '生日专属礼包',
          '每月3张运费券'
        ]
      },
      {
        level: 3,
        name: '金卡会员',
        requiredPoints: 5000,
        benefits: [
          '消费积分1.5倍累计',
          '专属客服经理',
          '新品优先购买权',
          '会员日双倍积分'
        ]
      },
      {
        level: 4,
        name: '钻石会员',
        requiredPoints: 10000,
        benefits: [
          '消费积分2倍累计',
          '专属折扣',
          '优先购买权',
          '专属客服',
          '生日福利',
          '每月5张运费券'
        ]
      }
    ]

    const userInfo = ref<UserInfo>({
      nickname: 'Vue用户',
      points: 2200,
      level: 2
    })

    const currentLevel = computed(() =>
      memberLevels.find(l => l.level === userInfo.value.level) || memberLevels[0]
    )

    const nextLevel = computed(() =>
      memberLevels.find(l => l.level === userInfo.value.level + 1) || memberLevels[0]
    )

    const progressPercentage = computed(() => {
      const current = currentLevel.value.requiredPoints
      const next = nextLevel.value.requiredPoints
      return ((userInfo.value.points - current) / (next - current)) * 100
    })

    const progressFormat = () =>
      `${userInfo.value.points}/${nextLevel.value.requiredPoints}`

    const showPointsDialog = (type: string) => {
      // 积分操作逻辑
    }

    return {
      memberLevels,
      userInfo,
      currentLevel,
      nextLevel,
      progressPercentage,
      progressFormat,
      showPointsDialog
    }
  }
})
</script>

<style scoped>
.member-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.member-card,
.level-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.member-card {
  background-color: v-bind(currentLevel.level === 1 ? '#f0f9eb' : currentLevel.level === 2 ? '#f9f0f0' : currentLevel.level === 3 ? '#f9f0f9' : '#f0f9f9'); /* 根据会员等级调整背景色 */
  height: 140px;
  margin-top: 20px;
}

.level-card {
  background-color: #f5f5f5; /* 添加背景色 */
  margin-top: 20px; /* 添加外边距 */
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.level-list {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap; /* 允许换行 */
}

.level-item {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
  flex: 1 1 calc(20% - 20px); /* 每个等级占25%，减去间隙 */
  transition: all 0.3s;
}

.current-level {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.points {
  color: #e6a23c;
  font-size: 24px;
  font-weight: bold;
}

.points-actions {
  margin-top: 20px;
  text-align: center;
}

/* 去除无序列表的点，并居中显示 */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.benefits-list li {
  margin: 10px 0;
  font-size: 14px; /* 调整字体大小 */
  color: #666; /* 调整字体颜色 */
}
</style>
